<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-remove="handleRemoveTab" @tab-click="handleClickTab">
      <!-- ---------------------------------左侧选项卡----------------------------------------- -->
      <el-tab-pane label="委外维修" name="1">
        <content-left v-if="activeName == '1'" @click_create_receptiondate="handleReceptiondate"
          @click_create_item="handleCreateItem" @click_trans_feror="handleTransFeror" />
      </el-tab-pane>
      <!-- ---------------------------------右侧选项卡----------------------------------------- -->
      <el-tab-pane label="与我相关" name="2">
        <content-right v-if="activeName == '2'" ref="iscond" @click_create_receptiondate="handleReceptiondate" />
      </el-tab-pane>
      <!-- ---------------------------------设备报修详情选项卡----------------------------------------- -->
      <el-tab-pane closable label="设备报修详情" name="3" v-if="flag">
        <content-detail v-if="activeName == '3'" :parentid="consumableBaseId" />
      </el-tab-pane>
      <!-- ---------------------------------申请委外维修选项卡----------------------------------------- -->
      <el-tab-pane closable v-if="applyFlag" label="申请委外维修" name="4">
        <content-form ref="SubmitForm" v-if="activeName == '4'" @form_submit_click='handleformSubmitClick' />
      </el-tab-pane>
      <!-- ---------------------------------申请委外维修选项卡----------------------------------------- -->
      <el-tab-pane closable v-if="repairedFlag" label="维修完毕" name="5">
        <repaired-form v-if="activeName == '5'" :parentid="repairedId"
          @repairedform_submit_click='handlerepairedformSubmitClick' />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import contentLeft from './contener-left'
import contentRight from './contener-right'
import contentDetail from './contener-detail'
import contentForm from './contener-form'
import repairedForm from './contener-repaired'
export default {
  name: 'ItemList',
  /** 可选：表单组件，操作栏组件，抽屉组件 */
  components: {
    contentLeft,
    contentDetail,
    contentRight,
    contentForm,
    repairedForm
  },
  data () {
    return {
      activeName: '1',
      activeNameClick: '1',
      flag: false,
      applyFlag: false,
      repairedFlag: false,
      consumableBaseId: '',//委外维修 ID，传详情页
      repairedId: '',//委外维修 ID，传维修完毕
    }
  },
  watch: {
    activeName (val) {
      if (val != '2') {
        if (this.$route.query.isCondition) {
          this.$route.query.isCondition = undefined
        }
      }

    }
  },
  computed: {
    isCondition: {
      get () {
        return this.$store.state.user.isCondition
      }
    },
  },
  mounted () {
    this.activeName = this.isCondition
    if (this.isCondition === '2') {
      setTimeout(() => {
        this.$refs['iscond'].$refs['pagination_table'].handleQuery({ 'audit.status': '1' });
      }, 500);
    }
  },
  methods: {
    handleRemoveTab (val) {
      if (val == 3) {
        this.flag = false
      } else if (val == 4) {
        this.$refs['SubmitForm'].handleRemove()
        this.applyFlag = false
        this.activeName = '1'
      } else if (val == 5) {
        this.repairedFlag = false
        this.activeName = '1'
      }
      this.activeName = this.activeNameClick
    },
    // 点击tab标签
    handleClickTab (val) {
      if (val.name == '3' || val.name == '4' || val.name == '5') {
        return
      } else {
        this.activeNameClick = val.name
      }
      if (val.name != '4') {
        if (this.applyFlag) {
          this.$refs['SubmitForm'].handleRemove()
        }
        this.applyFlag = false
      }
      if (val.name != '5') {
        if (this.applyFlag) {
          // this.$refs['SubmitForm'].handleRemove()
        }
        this.repairedFlag = false
      }
      this.flag = false
    },
    // 接收子级传上来的 基值 ID,跳转详情页
    handleReceptiondate (id) {
      this.flag = true
      this.activeName = '3'
      this.consumableBaseId = id * 1
    },
    // 点击申请委外维修跳转新增委外
    handleCreateItem (val) {
      this.applyFlag = true
      this.activeName = '4'
      this.$nextTick(() => {
        this.$refs['SubmitForm'].handleParentint(val)
      });
    },
    handleformSubmitClick () {
      this.applyFlag = false
      this.activeName = '1'
    },
    handlerepairedformSubmitClick () {
      this.repairedFlag = false
      this.activeName = '1'
    },
    // 跳转维修完毕--------------
    handleTransFeror (id) {
      this.repairedFlag = true
      this.activeName = '5'
      this.repairedId = id * 1
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__content {
  padding: 0;
}
</style>
